<template>
  <div class="TaskManagementBox">
    <!-- 左侧 -->
    <a-row style="width: 100%; height: 100%" v-if="paneData">
      <!-- 右侧 rightColMd -->
      <a-col :md="24" style="height: 100%">
        <div class="TaskManagement_right">
          <div class="TaskManagement_right_box">
            <div class="TaskManagement_right_top">
              <div class="TaskManagement_right_top_header">
                <div class="TaskManagement_right_top_header_box">
                  <div class="icon_box">
                    <i class="iconfont icon-yueyongdianliangbili"></i>
                  </div>
                  <div class="TaskManagement_right_top_header_box_name">
                    <div class="name">任务</div>
                    <div class="name_val">{{ paneData.task.taskName }}</div>
                  </div>
                </div>
              
              </div>
              <div class="TaskManagement_right_top_other">
                <div class="name">核算进度:</div>
                <a-progress :percent="percentage" />
              </div>
            </div>

            <div class="TaskManagement_right_bottom scrollbar">
              <a-tabs default-active-key="1">
                <a-tab-pane key="1">
                  <span slot="tab" class="title">
                    <i class="iconfont icon-bg-info"></i>
                    <div>详细信息</div>
                  </span>
                  <!-- {{computedPaneData}} -->
                  <div class="info_box">
                    <a-collapse v-model="activeKey">
                      <!--      v-for="(item,index) in mockData"  -->
                      <a-collapse-panel
                        v-for="(value, name, index) in computedPaneData"
                        :key="String(index)"
                      >
                        <template slot="header">
                          <div class="header">
                            <div>{{ value.title }}</div>
                            <div class="right_num">
                              填报{{ headerComputed(value) }}
                            </div>
                          </div>
                        </template>
                        <div class="info">
                          <div
                            class="name"
                            :style="{ color: value.background }"
                          >
                            <i :class="value.iconfont" class="iconfont"></i>
                            {{ value.categoryName }}
                          </div>
                          <div class="info_table weight">
                            <div>设施名称</div>
                            <div>排放源</div>
                            <div>责任人</div>
                            <div>填报人</div>
                            <div>填报状态</div>
                            <div>凭证</div>
                       
                          </div>
                          <div
                            v-for="(z, h) in value.facilityList"
                            :key="h"
                            class="info_table"
                          >
                            <div>{{ z.facilitiesName }}</div>
                            <div>{{ z.boundaryName }}</div>
                            <div>{{ z.principal }}</div>
                            <div>{{ z.informant }}</div>
                            <div>
                              {{ z.fillingStatus == 2 ? "完成" : "未填报" }}
                            </div>
                            <div>{{ z.voucher == 2 ? "无" : "" }}</div>
                          </div>
                          <!-- </div> -->
                        </div>
                      </a-collapse-panel>
                    </a-collapse>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="2">
                  <span slot="tab" class="title">
                    <i class="iconfont icon-guanlian2"></i>
                    <div>相关</div>
                  </span>

                  <a-list
                    :grid="{ gutter: 16, column: 4 }"
                    :data-source="data"
                    style="margin-top: 6px"
                  >
                    <a-list-item slot="renderItem" slot-scope="item, index">
                      <a-card :title="item.title">
                        <div
                          style="
                            width: 100%;
                            margin-bottom: 6px;
                            cursor: pointer;
                          "
                        >
                          <img
                            @click.self="showBigImage($event)"
                            style="width: 100%; border-radius: 5px"
                            src="@/assets/img/fujin1.jpg"
                            alt
                          />
                        </div>
                        <a-button>退回</a-button>
                        <a-button>删除</a-button>
                      </a-card>
                    </a-list-item>
                  </a-list>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import BigImg from "@/components/Tools/BigImg.vue";
import { taskList, queryTaskBoundaryList } from "@/api/api";
import { ListMixin } from "@/mixins/ListMixin";

export default {
  mixins: [ListMixin],
  props: ["paneData"],
  data() {
    return {
      taskInfo: null,
      taskId: "",
      url: {
        list: "/accounting/task/list",
      },
      columns: [
        {
          title: "任务名称",
          align: "left",
          dataIndex: "taskName",
        },
        {
          title: "任务进度",
          align: "left",
          dataIndex: "roleName",
        },
        {
          title: "任务状态",
          align: "left",
          dataIndex: "taskStatus",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "left",
          scopedSlots: { customRender: "action" },
        },
      ],
      photoVisible: false,
      bigImgUrl: "",
      mockData: [
        {
          title: "范围一 : 直接排放",
          background: "rgba(252, 220, 208, 1),rgba(253, 243, 242, .3)",
          source: [
            {
              name: "固定燃烧",
              iconfont: "icon-jianzhuanquan-",
              background: "#f74b4a",
              facility: [
                {
                  facilityName: "设施1",
                  state: 1,
                },
              ],
            },
            {
              name: "移动燃烧",
              iconfont: "icon-yidong1",
              background: "#f74b4a",
              facility: [],
            },
            {
              name: "工业过程",
              iconfont: "icon-gongye",
              background: "#f74b4a",
              facility: [],
            },
          ],
        },
        {
          title: "范围二 : 直接排放",
          background: "rgba(254, 240, 223, 1),rgba(254, 240, 223, 1)",
          source: [
            {
              name: "采暖设施",
              iconfont: "icon-zuoce-tongfengkongtiaoyucainuan-gaoliang",
              background: "#f8890d",
              facility: [],
            },
            {
              name: "制冷设施",
              iconfont: "icon-qingjingmoshitubiaojiudian_zhileng",
              background: "#f8890d",
              facility: [],
            },
            {
              name: "用电设施",
              iconfont: "icon-yongdianliang",
              background: "#f8890d",
              facility: [],
            },
          ],
        },
      ],
      taskList: [],
      activeKey: ["0", "1", "2"],
      data: [
        {
          title: "附件1",
        },
        {
          title: "附件2",
        },
        {
          title: "附件3",
        },
        {
          title: "附件4",
        },
      ],
    };
  },
  components: {
    BigImg,
  },
  computed: {
    computedPaneData() {
      var scopeObj = {};
      var Category = {};
      //第一层 范畴
      this.paneData.fbList.forEach((item) => {
        if (!scopeObj["scope" + item.scopeCode]) {
          scopeObj["scope" + item.scopeCode] = [];
        }
        scopeObj["scope" + item.scopeCode].push(item);
      });
      // 第二层类别
      for (let key in scopeObj) {
        if (Array.isArray(scopeObj[key])) {
          scopeObj[key].forEach((Accounting) => {
            if (!Category["Category" + Accounting.boundaryCategoryCode]) {
              Category["Category" + Accounting.boundaryCategoryCode] = {};
              if (Accounting.boundaryCategoryCode == 1) {
                Category["Category" + Accounting.boundaryCategoryCode][
                  "background"
                ] = "#f74b4a";
                Category["Category" + Accounting.boundaryCategoryCode][
                  "iconfont"
                ] = "icon-jianzhuanquan-";
              }
              Category["Category" + Accounting.boundaryCategoryCode]["title"] =
                Accounting.scopeName;
              Category["Category" + Accounting.boundaryCategoryCode][
                "categoryName"
              ] = Accounting.boundaryCategoryName;
              Category["Category" + Accounting.boundaryCategoryCode][
                "facilityList"
              ] = [];
            }
            Category["Category" + Accounting.boundaryCategoryCode][
              "facilityList"
            ].push(Accounting);
          });
        }
      }

      //   console.log(Category, scopeObj);
      //   return  this.paneData.fbList
      return Category;
    },
    leftColMd() {
      return !this.taskId ? 24 : 8;
    },
    rightColMd() {
      return !this.taskId ? 0 : 16;
    },
    percentage() {
      var total = 0;
      var finishNum = 0;
      this.mockData.forEach((item) => {
        //   console.log(item);
        item.source.forEach((scoped) => {
          scoped.facility.forEach((facility) => {
            if (facility.state == 1) {
              finishNum++;
            }
            total++;
          });
        });
      });
      //   console.log();
      return ((finishNum / total) * 100).toFixed(2);
    },
    facilityComputed() {
      return function (item) {
        var total = 0;
        var finishNum = 0;
        item.facility.forEach((facility) => {
          if (facility.state == 1) {
            finishNum++;
          }
          total++;
        });
        return `${finishNum}/${total}`;
      };
    },
    headerComputed() {
      return function (value) {
        var total = 0;
        var finishNum = 0;
        value.facilityList.forEach((facility) => {
          if (facility.boundaryCategoryCode == 1) {
            finishNum++;
          }
          total++;
        });

        return ` ${finishNum}/${total}`;
      };
    },
  },
  mounted() {
    // this.loadData();
  },
  methods: {
    closeTaskInfo() {},
    searchQuery() {},
    showBigImage(e) {
      //点击图片函数，点击后，把photoVisible设置成true
      if (e != "") {
        this.photoVisible = true;
        this.bigImgUrl = e.currentTarget.src;
      }
    },

    onSearch() {},
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/taskManagementCopy.scss";
@import "@/assets/css/scrollbar.scss";
</style>


